<template>
	<!-- 封装歌单列表显示 -->
	<div class="playlists">
		<div
			class="item"
			v-for="item in playlists"
			:key="item.id"
		>
			<el-card shadow="hover" :body-style="{ padding: '0.5rem' }">
				<div class="img">
					<img :src="getUrl(item.songPic)" />
					<div class="playCount" v-if="item.playcount">
						<IconPark :icon="Headset" />
						<!-- <span>{{ useNumberFormat(item.playcount) }}</span> -->
					</div>
				</div>
				<div class="name">
					<p class="ellipsis">{{ item.name }}</p>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Headset } from '@icon-park/vue-next';
import { defineProps } from 'vue';
import { getUrl } from '@/utils/format';
// import { useRouter } from 'vue-router';
//import { useNumberFormat } from '@/utils/format';
//const router = useRouter();
const { playlists } = defineProps(['playlists']);
</script>

<style lang="scss" scoped>
.playlists {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    .item {
        //width: 16rem;
        height: auto;//20rem; /* 添加或调整这个值以设置卡片的固定高度 */
        margin: 1rem 0.5rem;
        cursor: pointer;

        .img {
            position: relative;
            width: 100%; /* 确保图片容器宽度为100% */
            height: 100%; /* 确保图片容器高度为100% */
            
            img {
                width: 100%; /* 图片宽度为100% */
                height: 100%; /* 图片高度为100% */
                object-fit: cover; /* 保证图片填充而不失真 */
            }

            .playCount {
                width: 100%;
                height: 25px;
                position: absolute;
                bottom: 5px;
                background-color: rgba($color: #000000, $alpha: 0.3);
                color: #f0f0f0;
                padding-left: 6px;
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>
